import { ContentByFramework, FileName, ReactLogo, SvelteLogo, TabbedCodeGroup, TabbedCodeGroupItem } from "@/components/forMdx";

Sign up for a free API key at [dashboard.jazz.tools](https://dashboard.jazz.tools) for higher limits or production use, or use your email address as a temporary key to get started quickly.

<div style={{display: props.hideFileName ? 'none' : ''}}>
  <ContentByFramework framework="react">
    <FileName>.env</FileName>
  </ContentByFramework>
  <ContentByFramework framework="svelte">
    <FileName>.env</FileName>
  </ContentByFramework>
</div>

<TabbedCodeGroup default="react" savedPreferenceKey="framework" id="get-api-key" style={{display: props.hideCodeGroup ? 'none' : ''}}>
  <TabbedCodeGroupItem label="React" value="react" icon={<ReactLogo />} preferWrap>
    ```bash
    NEXT_PUBLIC_JAZZ_API_KEY="you@example.com" # or your API key
    ```
  </TabbedCodeGroupItem>
  <TabbedCodeGroupItem label="Svelte" value="svelte" icon={<SvelteLogo />} preferWrap>
    ```bash
    PUBLIC_JAZZ_API_KEY="you@example.com" # or your API key
    ```
  </TabbedCodeGroupItem>
</TabbedCodeGroup>